<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子的内边距_padding</title>
    <style>
        #d1 {
          width: 200px;
          height: 200px;
          /* 单独设置内边距  */
          /*padding-left: 10px;*/
          /*padding-right: 20px;*/
          /*padding-top: 20px;*/
          /*padding-bottom: 20px;*/
          /* 写一个: 上下左右都是这个值 */
          /*padding: 20px;*/
          /* 两个值: 第一个:上下 第二个：左右 */
          /*padding: 20px 50px;*/
          /* 写三个值：第一个：上内边距 第二个左右内边距 最后一个:下内边距 */
          /*padding: 10px 50px 20px;*/
          /* 写四个值: 上 右 下 左 */
          padding: 20px 20px 10px 10px;
          background-color: green;
        }

        span {
          padding-left: 20px;
          padding-right: 20px;
          /* 行内元素会出问题 */
          padding-top: 40px;
          padding-bottom: 40px;
          background-color: yellowgreen;
        }
        img {
          width: 200px;
          padding: 20px 10px;
        }
    </style>
</head>
<body>
    <div id="d1">你好</div>
    <hr>
    <span>你好！码农</span>
    <div>你好</div>
    <img src="../images/灰太狼.jpg" alt="">
</body>
</html>